<template>
	<view class="birthday-modal-wrap">
		<!-- :minDate="minDate" :maxDate="maxDate" -->
		<!-- :formatter="formatter" -->
		<u-datetime-picker ref="datetimePicker" :show="show_date" v-model="pop_birthday" mode="date" :minDate="minDate" :maxDate="maxDate"
			title="选择生日" itemHeight="42" 
			visibleItemCount="8"
			:defaultIndex="defaultIndex" @confirm="doConfirmDate"
			@cancel="doConcelDate"></u-datetime-picker>

	</view>
</template>

<script>
	import util from '@/plugin/util.js'

	export default {
		components: {

		},
		data() {
			return {
				pop_birthday: Number(new Date()) - 1000 * 60 * 60 * 24 * 365 * 25, //
				show_date: false,
				minDate: new Date().getTime() - 80 * 365 * 24 * 60 * 60 * 1000,
				maxDate: new Date().getTime(),// - 10 * 365 * 24 * 60 * 60 * 1000,
				defaultIndex: [10, 0, 0],
			}
		},
		watch: {

		},
		mounted() {
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			init() {
				// this.pop_birthday = Number(new Date());
				this.show_date = true;
			},
			doConcelDate() {
				this.show_date = false;
			},
			doConfirmDate(e) {
				console.warn('pop_birthday', this.pop_birthday)
				console.warn('date', e)

				this.pop_birthday = e.value;
				this.$emit('confirm',util.formatMillisecondsToDate(e.value))

				this.show_date = false;
			},

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		},
	}
</script>

<style lang="scss" scoped>
	.cus-pop-box {
		padding-top: 40rpx;

		.pop-title {
			margin-bottom: 30rpx;
			text-align: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;
		}

		.pop-ctx {
			padding: 0 32rpx;

			&.pop-ctx-qudao {
				padding: 0;

				.xingbie-box {
					margin-bottom: calc(96rpx + constant(safe-area-inset-bottom));
					margin-bottom: calc(96rpx + env(safe-area-inset-bottom));
				}
			}

			.xingbie-box {
				margin-bottom: 150rpx;

				.items {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 334rpx;
						height: 80rpx;
						background: #F6FAFD;
						border-radius: 16rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #CB0011;
						border: 2rpx solid transparent;

						&.select {
							color: #fff;
							background: #CB0011;
						}
					}
				}
			}

		}

		.pop-foot {}
	}
</style>